<template>
	<div class="data_detail_wrapper">
		<div class="item">
			<div class="label">所属课题：</div>
			<topic-info :data="topicData"></topic-info>
		</div>
		<div class="item">
			<achievement-card :title="labelObject.title">
				<div class="body">
					<el-row :gutter="16">
						<el-col :span="24" v-if="!!labelObject.filed1">
							<h4>{{ labelObject.filed1 }}：</h4>
							<p>{{ data.filed1 }}</p>
						</el-col>
						<el-col :span="24" v-if="!!labelObject.filed2">
							<h4>{{ labelObject.filed2 }}：</h4>
							<p>{{ data.filed2 }}</p>
						</el-col>
						<el-col :span="8" v-if="!!labelObject.filed3">
							<h4>{{ labelObject.filed3 }}：</h4>
							<p>{{ data.filed3 }}</p>
						</el-col>
						<el-col :span="9" v-if="!!labelObject.filed4">
							<h4>{{ labelObject.filed4 }}：</h4>
							<p>{{ data.filed4 }}</p>
						</el-col>
						<el-col :span="7" v-if="!!labelObject.filed5">
							<h4>{{ labelObject.filed5 }}：</h4>
							<p>{{ data.filed5 }}</p>
						</el-col>
						<el-col :span="24" v-if="fileListData.length > 0">
							<h4>成果文件：</h4>
							<p>
								<span v-for="(item, index) in fileListData" :key="index" @click="handleDownloadFile(item)">{{ item.name }}</span>
							</p>
						</el-col>
					</el-row>
				</div>
			</achievement-card>
		</div>
	</div>
</template>

<script>
import topicInfo from '../topicInfo';
import achievementCard from './card';
export default {
	components: { topicInfo, achievementCard },
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		topicData() {
			return this.data.topic || {};
		},
		labelObject() {
			if (this.data.filed10 === '1') {
				return { title: '期刊论文', filed1: '论文标题', filed2: '期刊名称', filed3: '期刊号', filed4: '出版时间', filed5: 'DOI' };
			} else if (this.data.filed10 === '2') {
				return { title: '授权专利', filed1: '专利名称', filed3: '专利号', filed4: '授权时间', filed5: '专利类别' };
			} else if (this.data.filed10 === '3') {
				return { title: '会议论文', filed1: '论文标题', filed2: '会议名称', filed4: '会议时间' };
			} else if (this.data.filed10 === '4') {
				return { title: '获得奖项', filed1: '获奖项目', filed3: '授奖单位', filed4: '获奖时间', filed5: '奖励级别' };
			} else {
				return {};
			}
		},
		fileListData() {
			if (!!this.data.fileJson && this.$isJSON(this.data.fileJson)) {
				return JSON.parse(this.data.fileJson);
			} else {
				return [];
			}
		}
	},
	methods: {
		//下载文件
		handleDownloadFile(data) {
			let suffix = data.url.split('.');
			let name = `${data.name}.${data.suffix || suffix[suffix.length - 1]}`;
			this.$fileDownload(data.url, name);
		}
	}
};
</script>

<style lang="scss" scoped>
.achievement_container {
	flex: 1;
	overflow: hidden;
	.el-col {
		display: flex;
		align-items: flex-start;
		font-size: 16px;
		line-height: 2;
		margin-bottom: 22px;
		&:nth-last-child(1) {
			margin-bottom: 0;
		}
		h4 {
			color: #606266;
		}
		p {
			color: #303133;
		}
		span {
			cursor: pointer;
			margin-right: 16px;
			&:hover {
				text-decoration: underline;
				color: var(--primary-hover);
			}
		}
	}
}
</style>
